<template>
  <view class="brand-page">
    <!-- 左侧品牌系列导航 -->
    <scroll-view class="left-sidebar" scroll-y>
      <view 
        class="category-section" 
        v-for="(category, categoryIndex) in categories" 
        :key="categoryIndex"
      >
        <view class="category-title">{{ category.title }}</view>
        <view class="series-list">
          <view 
            class="series-item" 
            :class="{ 
              active: currentCategory === categoryIndex && currentSeries === seriesIndex 
            }"
            v-for="(series, seriesIndex) in category.series" 
            :key="seriesIndex"
            @tap="switchSeries(categoryIndex, seriesIndex)"
          >
            {{ series.name }}
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 右侧产品列表 -->
    <scroll-view 
      class="right-content" 
      scroll-y 
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefreshing"
    >
      <view class="product-list">
        <view class="product-card" v-for="(item, index) in currentProducts" :key="index">
          <view class="product-main">
            <view class="product-image"></view>
            <view class="product-info">
              <view class="product-name">{{ item.name || '产品名称' }}</view>
              <view class="product-desc">{{ item.desc || '这里是产品简介描述' }}</view>
            </view>
          </view>
          <view class="product-bottom">
            <view class="price-wrap">
              <text class="price-symbol">¥</text>
              <text class="price-value">{{ item.price || '1446.8' }}</text>
            </view>
            <view class="right-wrap">
              <text class="points-text">返{{ item.points || '888' }}积分</text>
              <button class="buy-btn" @tap="handleBuy(item)">立即购买</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="loading">加载中...</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0,
      currentSeries: 0,
      isRefreshing: false,
      loading: false,
      page: 1,
      categories: [
        {
          title: '杂比特系列',
          series: [
            { name: '001系列', id: '001' },
            { name: '002系列', id: '002' },
            { name: '003系列', id: '003' }
          ]
        }
      ],
      currentProducts: []
    }
  },
  
  created() {
    this.loadProducts()
  },
  
  methods: {
    // 切换系列
    async switchSeries(categoryIndex, seriesIndex) {
      this.currentCategory = categoryIndex
      this.currentSeries = seriesIndex
      this.page = 1
      await this.loadProducts(true)
    },
    
    // 加载产品数据
    async loadProducts(reset = false) {
      try {
        this.loading = true
        const currentSeries = this.categories[this.currentCategory].series[this.currentSeries]
        
        // 模拟API调用
        const products = await this.fetchProducts({
          seriesId: currentSeries.id,
          page: this.page
        })
        
        if (reset) {
          this.currentProducts = products
        } else {
          this.currentProducts = [...this.currentProducts, ...products]
        }
        
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 模拟获取产品数据
    async fetchProducts({ seriesId, page }) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            {
              id: `${seriesId}-${page}-1`,
              name: '产品名称',
              desc: '产品描述',
              price: '1446.8',
              points: '888'
            },
            {
              id: `${seriesId}-${page}-2`,
              name: '产品名称',
              desc: '产品描述',
              price: '1446.8',
              points: '888'
            }
          ])
        }, 500)
      })
    },
    
    // 加载更多
    async loadMore() {
      if (this.loading) return
      this.page++
      await this.loadProducts()
    },
    
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      this.page = 1
      await this.loadProducts(true)
      this.isRefreshing = false
    },
    
    // 购买处理
    handleBuy(item) {
      uni.showToast({
        title: `购买商品: ${item.id}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.brand-page {
  display: flex;
  height: 100vh;
  background: #fff;
}

.left-sidebar {
  width: 180rpx;
  height: 100vh;
  background: #fff;
  flex-shrink: 0;
  border-right: 2rpx solid #f5f5f5;
  
  .category-section {
    .category-title {
      font-size: 28rpx;
      color: #ff6b00;
      padding: 20rpx 10rpx;
      background: #fff4eb;
      position: relative;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .series-list {
      background: #fff;
      
      .series-item {
        font-size: 26rpx;
        color: #999;
        padding: 30rpx 10rpx;
        text-align: center;
        position: relative;
        transition: all 0.3s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        &.active {
          color: #ff6b00;
          font-weight: normal;
          background: #fff;
        }
        
        &:hover {
          color: #ff6b00;
          background: #fff4eb;
        }
      }
    }
  }
}

.right-content {
  flex: 1;
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}

.product-list {
  .product-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    
    .product-main {
      display: flex;
      gap: 20rpx;
      margin-bottom: 20rpx;
      
      .product-image {
        width: 160rpx;
        height: 160rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
        flex-shrink: 0;
      }
      
      .product-info {
        flex: 1;
        
        .product-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 12rpx;
        }
        
        .product-desc {
          font-size: 24rpx;
          color: #999;
          line-height: 1.4;
        }
      }
    }
    
    .product-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .price-wrap {
        .price-symbol {
          font-size: 24rpx;
          color: #ff6b00;
        }
        .price-value {
          font-size: 36rpx;
          color: #ff6b00;
          font-weight: bold;
        }
      }
      
      .right-wrap {
        display: flex;
        align-items: center;
        gap: 20rpx;
        
        .points-text {
          font-size: 24rpx;
          color: #ff6b00;
        }
        
        .buy-btn {
          background: #ff6b00;
          color: #fff;
          font-size: 26rpx;
          padding: 6rpx 24rpx;
          border-radius: 30rpx;
          border: none;
          line-height: 1.8;
        }
      }
    }
  }
}

.loading-more {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 20rpx 0;
}
</style> 